<!-- 单选按钮组件 -->
<template>
  <!-- dot -->
  <ul
    :class="[
      'sky-radio-list-dot',
      'sky-radio-list',
      { disabled: disabled },
      { verticle },
    ]"
    v-if="mode === 'dot'"
  >
    <li
      class="sky-radio-item"
      v-for="(item, index) of radioData"
      :key="`sky-raido-${name}-${index}`"
    >
      <input
        v-model="checked"
        type="radio"
        :name="name"
        :id="`sky-raido-${name}-${index}`"
        :value="item.value"
        hidden
      />
      <label
        :for="`sky-raido-${name}-${index}`"
        @click="handleRadioChecked(item, $event)"
      ></label>
      <span class="true-label" @click="handleRadioChecked(item, $event)">{{
        item.label
      }}</span>
    </li>
  </ul>

  <!-- box -->
  <ul
    :class="[
      'sky-radio-list-box',
      'sky-radio-list',
      { disabled: disabled },
      { verticle },
    ]"
    v-else-if="mode === 'box'"
  >
    <li
      :class="['sky-radio-item', { checked: checked === item.value }]"
      v-for="(item, index) of radioData"
      :key="`sky-raido-${name}-${index}`"
      @click="handleRadioChecked(item)"
    >
      {{ item.label }}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'RadioButton',

  model: {
    prop: 'checkedValProp',
    event: 'updateCheckedVal',
  },

  props: {
    data: {
      required: true,
      type: Array,
      default: () => [
        {
          label: '前端工程师',
          value: '0',
        },
        {
          label: '后端工程师',
          value: '1',
        },
        {
          label: '全栈工程师',
          value: '2',
        },
      ],
    },
    name: {
      required: true,
      type: String,
      default: 'radioName',
    },
    checkedValProp: {
      required: true,
      validator: value => ['string', 'number'].includes(typeof value),
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    verticle: {
      type: Boolean,
      default: false,
    },
    mode: {
      validator: value => ['dot', 'box'].includes(value),
      default: 'dot',
    },
  },

  computed: {
    radioData() {
      return this.data
    },
    checked: {
      get() {
        return this.checkedValProp
      },
      set(val) {
        this.$emit('updateCheckedVal', val)
      },
    },
  },

  watch: {
    checked(val, oVal) {
      if (val === oVal) return
      if (oVal !== null && oVal !== undefined) {
        const data = this.radioData.find(item => item.value === val)
        this.$emit('on-change', data)
      }
    },
  },

  methods: {
    // true-label 点击事件
    handleRadioChecked(item, e) {
      if (this.disabled) {
        e && e.preventDefault()
        return
      }
      if (this.checked !== item.value) {
        this.checked = item.value
        this.$emit('on-checked', item)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
// 颜色
$orange: #f90;
$blue: #09f;
$grey: #ccc;

.sky-radio-list {
  display: inline-flex;

  // * 方向
  &.verticle {
    flex-direction: column;

    .sky-radio-item {
      margin-left: 0;
    }
  }
}

// 原始单选按钮样式
.sky-radio-list-dot {
  .sky-radio-item {
    display: flex;
    align-items: center;
    margin-left: 20px;
    &:first-child {
      margin-left: 0;
    }
  }
  input:checked + label {
    background-color: $blue;
  }
  label {
    // margin-right: 5px;
    padding: 2px;
    border: 1px solid $blue;
    border-radius: 100%;
    width: 15px;
    height: 15px;
    background-clip: content-box;
    transition: all 300ms;
  }
  .true-label {
    padding-left: 5px;
    font-size: 16px;
  }

  &:not(.disabled) {
    .sky-radio-item {
      &:hover label {
        border-color: $blue;
        // background-color: $blue;
        box-shadow: 0 0 7px $blue;
      }

      label,
      .true-label {
        cursor: pointer;
      }
    }
  }

  &.disabled {
    .sky-radio-item {
      input:checked + label {
        background-color: $grey;
      }
      label {
        border: 1px solid $grey;
      }
      .true-label {
        color: $grey;
      }
    }
  }
}

.sky-radio-list-box {
  list-style: none;

  .sky-radio-item {
    border: 1px solid $grey;
    padding: 5px 10px;
    cursor: pointer;

    &.checked {
      border: 1px solid $blue;
      box-shadow: 0 0 1px $blue;
      color: $blue;
    }
  }

  &:not(.verticle) {
    .sky-radio-item {
      &:not(:last-of-type) {
        // border-right: none;
      }

      &:first-of-type {
        border-radius: 5px 0 0 5px;
      }

      &:last-of-type {
        border-radius: 0 5px 5px 0;
      }
    }
  }

  &.verticle {
    .sky-radio-item {
      &:not(:last-of-type) {
        // border-bottom: none;
      }

      &:first-of-type {
        border-radius: 5px 5px 0 0;
      }

      &:last-of-type {
        border-radius: 0 0 5px 5px;
      }
    }
  }

  &.disabled {
    .sky-radio-item {
      cursor: auto;
    }
  }
}
</style>
